<div ng-controller="SearchCtrl" ng-init="init()">

	<div class="dashboard-editor-header">
		<div class="dashboard-editor-title"
			 style="border: 0; line-height: 41px;">
			<i class="icon icon-search"></i>
			Search
		</div>

		<div class="grafana-search-panel">
			<div class="search-field-wrapper">
				<button class="btn btn-success pull-right"
						dash-editor-link="app/partials/playlist.html"
						editor-scope="isolated">
					<i class="icon-play"></i>
					Playlist
				</button>
				<button class="btn btn-success pull-right"
						ng-click="toggleImport($event)">
					<i class="icon-download-alt"></i>
					Import
				</button>
				<button class="btn btn-success pull-right"
						ng-click="newDashboard()">
					<i class="icon-th-large"></i>
					New
				</button>
				<span style="position: relative;">
					<input type="text"
						   placeholder="search dashboards, metrics, or graphs"
						   xng-focus="giveSearchFocus"
						   ng-keydown="keyDown($event)" ng-model="query.query"
						   ng-model-options="{ debounce: 500 }"
						   spellcheck='false' ng-change="search()"/>
					<a class="search-tagview-switch" href="javascript:void(0);"
					   ng-class="{'active': tagsOnly}"
					   ng-click="showTags($event)">tags</a>
				</span>
			</div>
		</div>
	</div>

	<div ng-if="!showImport">
		<h6 ng-hide="results.dashboards.length">No dashboards matching your
			query were found.</h6>

		<div class="search-results-container" ng-if="tagsOnly">
			<div class="row">
				<div class="span6 offset1">
					<div ng-repeat="tag in results.tags" class="pointer"
						 style="width: 180px; float: left;"
						 ng-class="{'selected': $index === selectedIndex }"
						 ng-click="filterByTag(tag.term, $event)">
						<a class="search-result-tag label label-tag"
						   tag-color-from-name>
							<i class="icon icon-tag"></i>
							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="search-results-container" ng-if="!tagsOnly">
			<div class="search-result-item pointer" bindonce
				 ng-repeat="row in results.dashboards"
				 ng-class="{'selected': $index === selectedIndex }"
				 ng-click="goToDashboard(row.id)">

				<div class="search-result-actions small">
					<a ng-click="shareDashboard(row.id, row.id, $event)"
					   config-modal="app/partials/dashLoaderShare.html">
						<i class="icon-share"></i> share &nbsp;&nbsp;&nbsp;
					</a>
					<a ng-click="deleteDashboard(row, $event)">
						<i class="icon-remove"></i> delete
					</a>
				</div>

				<div class="search-result-tags">
					<a ng-click="filterByTag(tag, $event)"
					   ng-repeat="tag in row.tags" tag-color-from-name
					   class="label label-tag">
						{{tag}}
					</a>
				</div>

				<a class="search-result-link">
					<i class="icon icon-th-large"></i>
					<span bo-text="row.title"></span>
				</a>

			</div>
		</div>
	</div>

	<div class="editor-row" ng-if="showImport">
		<div class="section">
			<div class="editor-option">
				<h5>Local File
					<tip>Load dashboard JSON layout from file</tip>
				</h5>
				<form>
					<input type="file" id="dashupload" dash-upload/><br>
				</form>
			</div>
		</div>
	</div>

</div>
